<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <App></App>
  </div>
</body>
<script>

  Vue.config.productionTip = false; // 解决警告信息的

  /*
  
  假设Header要在很多地方使用，此时就需要全局注册
  全局注册需要使用 Vue.component("组件名称（注册时的名字）"，组件实例)来进行注册;
    

  
  */

  

  const Header = Vue.extend({

    name: "Header",
    template: `

        <h1>我是头部</h1>
  
    `
  });

  Vue.component("Header",Header);       //注意：注册组件不能写在组件定义的前面



  const App = Vue.extend({

    name: "App",
    template: `
      <div>
      <h1>App {{message}}</h1>
      <Header></Header>
      </div>
      `,
    data() {

      return {
        message: "hello",
      };
    },
  });

  console.log(app);




  const vm = new Vue({
    el: "#app",
    data() {
      return {

      };
    },

    components: {
      App,

    }

  });
</script>


</html>